<template>
	<view class="my-photo-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="navbar-title">我的相册</text>
				<view class="navbar-actions">
					<view class="action-btn" @click="showSearchDialog">
						<text class="action-icon">🔍</text>
					</view>
					<view class="action-btn" @click="showMoreOptions">
						<text class="action-icon">⋯</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 顶部标签栏 -->
		<view class="top-tabs">
			<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
				<view class="tabs-wrapper">
					<view 
						class="tab-item"
						:class="{ active: activeTab === tab.key }"
						v-for="tab in tabs"
						:key="tab.key"
						@click="switchTab(tab.key)"
					>
						<text class="tab-text">{{ tab.name }}</text>
						<view class="tab-indicator" v-if="activeTab === tab.key"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-section">
			<view class="filter-left">
				<view 
					class="filter-btn"
					:class="{ active: activeFilter === filter.key }"
					v-for="filter in updatedFilters"
					:key="filter.key"
					@click="switchFilter(filter.key)"
				>
					<text class="filter-text">{{ filter.name }}</text>
					<view class="filter-badge" v-if="filter.count">{{ filter.count }}</view>
				</view>
			</view>
			<view class="filter-right">
				<view class="sort-btn" @click="showSortOptions">
					<text class="sort-icon">⚙</text>
					<text class="sort-text">筛选</text>
				</view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stats-item">
				<text class="stats-number">{{ totalPhotos }}</text>
				<text class="stats-label">总照片</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-number">{{ unlockedPhotos }}</text>
				<text class="stats-label">已解锁</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-number">{{ generatingPhotos }}</text>
				<text class="stats-label">制作中</text>
			</view>
		</view>

		<!-- 免费提示 -->
		<view class="free-tip" v-if="showFreeTip">
			<view class="tip-content">
				<text class="tip-icon">🎁</text>
				<view class="tip-text-section">
					<text class="tip-title">限时福利</text>
					<text class="tip-text">可免费解锁2套写真</text>
				</view>
			</view>
			<view class="tip-close" @click="closeFreeTip">
				<text class="close-icon">×</text>
			</view>
		</view>

		<!-- 相册内容 -->
		<scroll-view class="album-content" scroll-y="true" @scrolltolower="loadMore" enhanced="true" bounces="true">
			<!-- 加载状态 -->
			<view class="loading-section" v-if="isLoading">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 相册列表 -->
			<view class="albums-list" v-else>
				<view 
					class="album-card"
					v-for="album in filteredAlbums"
					:key="album.id"
				>
					<view class="album-header">
						<view class="album-info">
							<view class="album-title-row">
								<text class="album-title">{{ album.title }}</text>
								<view class="album-tag" :class="album.type">
									<view class="generating-dot" v-if="album.type === 'generating'"></view>
									<text class="tag-text">
										{{ album.type === 'locked' ? '待解锁' : 
										   album.type === 'unlocked' ? '已解锁' : 
										   album.type === 'generating' ? '制作中' : '' }}
									</text>
								</view>
							</view>
							<view class="album-meta">
								<text class="album-date">{{ album.date }}</text>
								<text class="album-count">{{ album.totalCount }}张照片</text>
								<text class="unlock-count" v-if="album.type === 'locked' && album.unlockedCount">
									{{ album.unlockedCount }}张已解锁
								</text>
								<text class="progress-text" v-if="album.type === 'generating' && activeTab === 'ai_group'">
									还差{{ album.totalCount - album.currentCount }}人参与即可生成
								</text>
								<text class="progress-text" v-if="album.type === 'generating' && activeTab !== 'ai_group'">
									生成进度{{ album.progress }}%
								</text>
							</view>
						</view>
						<view class="view-all-btn" @click="viewAlbum(album.id)" v-if="album.type !== 'generating'">
							<text class="view-all-text">查看全部</text>
							<text class="arrow-icon">›</text>
						</view>
						<view class="progress-btn" @click="inviteFriends" v-if="album.type === 'generating' && activeTab === 'ai_group'">
							<text class="progress-text">邀请好友</text>
							<text class="arrow-icon">›</text>
						</view>
					</view>
					
					<view class="photo-grid">
						<view 
							class="photo-item"
							:class="{ 
								'photo-locked': photo.status === 'locked',
								'photo-generating': photo.status === 'generating'
							}"
							v-for="(photo, index) in album.photos"
							:key="photo.id"
							@click="viewPhoto(photo)"
						>
							<image 
								:src="photo.image" 
								mode="aspectFill" 
								class="photo-image"
								:class="{ 'blur-effect': photo.status === 'locked' }"
								lazy-load="true"
							></image>
							<view class="photo-overlay" v-if="photo.status === 'locked'">
								<view class="lock-icon">🔒</view>
								<text class="overlay-text">待解锁</text>
							</view>
							<view class="photo-overlay" v-if="photo.status === 'generating'">
								<view class="generating-spinner"></view>
								<text class="overlay-text">制作中</text>
							</view>
							<view class="photo-index">{{ index + 1 }}</view>
						</view>
						
						<!-- AI合照的占位符 -->
						<view 
							class="placeholder-item" 
							v-if="activeTab === 'ai_group' && album.type === 'generating'"
							v-for="n in (album.totalCount - album.photos.length)" 
							:key="'placeholder-' + n"
						>
							<view class="placeholder-content">
								<text class="placeholder-icon">👥</text>
								<text class="placeholder-text">等待参与</text>
							</view>
						</view>
						
						<!-- 其他类型的添加更多按钮 -->
						<view 
							class="add-more-btn" 
							@click="addMorePhotos(album.id)" 
							v-if="activeTab !== 'ai_group' && album.photos.length < 6"
						>
							<text class="add-icon">+</text>
							<text class="add-text">添加更多</text>
						</view>
					</view>
					
					<!-- AI合照的进度条 -->
					<view class="progress-section" v-if="activeTab === 'ai_group' && album.progress">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: album.progress + '%' }"></view>
						</view>
						<text class="progress-label">完成度: {{ album.progress }}%</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!isLoading && totalPhotos === 0">
				<view class="empty-icon">📸</view>
				<text class="empty-title">还没有照片</text>
				<text class="empty-desc">快去创建你的第一张AI写真吧</text>
				<view class="empty-btn" @click="goToCreate">
					<text class="btn-text">立即创建</text>
				</view>
			</view>

			<!-- 加载更多提示 -->
			<view class="load-more-tip" v-if="hasMoreData && !isLoading">
				<text class="load-more-text">上拉加载更多</text>
			</view>
			
			<!-- 底部间距 -->
			<view class="bottom-spacing"></view>
		</scroll-view>

		<!-- 客服咨询按钮 -->
		<view class="customer-service" @click="contactService">
			<view class="service-avatar">
				<image src="/static/images/lvpai/1521754111180_.pic_hd.jpg" mode="aspectFill" class="avatar-image"></image>
			</view>
			<view class="service-btn">
				<text class="service-text">管家咨询</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 'ai_photo',
			activeFilter: 'all',
			isLoading: false,
			showFreeTip: true,
			hasMoreData: true,
			tabs: [
				{ key: 'ai_photo', name: 'AI写真' },
				{ key: 'travel', name: '穿越旅行' },
				{ key: 'ai_erciyuan', name: 'AI二次元' },
				{ key: 'ai_group', name: 'AI合照' }
			],
			filters: [
				{ key: 'all', name: '全部', count: 0 },
				{ key: 'unlocked', name: '已解锁', count: 0 },
				{ key: 'locked', name: '待解锁', count: 0 },
				{ key: 'generating', name: '制作中', count: 0 }
			],
			// AI写真数据
			aiPhotoAlbums: [
				{
					id: 'neon_night',
					title: '霓虹夜色',
					date: '2025-01-02',
					type: 'locked',
					totalCount: 4,
					unlockedCount: 0,
					photos: [
						{
							id: 1,
							image: '/static/images/lvpai/1521754111180_.pic_hd.jpg',
							status: 'locked'
						},
						{
							id: 2,
							image: '/static/images/lvpai/1541754111183_.pic_hd.jpg',
							status: 'locked'
						},
						{
							id: 3,
							image: '/static/images/lvpai/1581754111190_.pic_hd.png',
							status: 'locked'
						},
						{
							id: 4,
							image: '/static/images/lvpai/1591754111191_.pic_hd.png',
							status: 'locked'
						}
					]
				},
				{
					id: 'vintage_style',
					title: '复古港风',
					date: '2025-01-01',
					type: 'unlocked',
					totalCount: 3,
					unlockedCount: 3,
					photos: [
						{
							id: 5,
							image: '/static/images/lvpai/1601754111192_.pic_hd.png',
							status: 'unlocked'
						},
						{
							id: 6,
							image: '/static/images/lvpai/1611754111193_.pic_hd.jpg',
							status: 'unlocked'
						},
						{
							id: 7,
							image: '/static/images/lvpai/1621754111195_.pic_hd.jpg',
							status: 'unlocked'
						}
					]
				}
			],
			// 穿越旅行数据
			travelAlbums: [
				{
					id: 'ancient_palace',
					title: '紫禁城穿越',
					date: '2025-01-03',
					type: 'generating',
					totalCount: 5,
					unlockedCount: 0,
					progress: 60,
					photos: [
						{
							id: 8,
							image: '/static/images/lvpai/1631754111196_.pic_hd.jpg',
							status: 'generating'
						},
						{
							id: 9,
							image: '/static/images/lvpai/1641754111197_.pic_hd.jpg',
							status: 'generating'
						},
						{
							id: 10,
							image: '/static/images/lvpai/1671754111201_.pic_hd.jpg',
							status: 'generating'
						}
					]
				},
				{
					id: 'edo_period',
					title: '江户时代',
					date: '2024-12-28',
					type: 'locked',
					totalCount: 6,
					unlockedCount: 2,
					photos: [
						{
							id: 11,
							image: '/static/images/lvpai/1421754111168_.pic_hd.jpg',
							status: 'unlocked'
						},
						{
							id: 12,
							image: '/static/images/lvpai/1431754111170_.pic_hd.jpg',
							status: 'unlocked'
						},
						{
							id: 13,
							image: '/static/images/lvpai/1521754111180_.pic_hd.jpg',
							status: 'locked'
						},
						{
							id: 14,
							image: '/static/images/lvpai/1541754111183_.pic_hd.jpg',
							status: 'locked'
						}
					]
				}
			],
			// AI二次元数据
			animeAlbums: [
				{
					id: 'sailor_moon',
					title: '美少女战士',
					date: '2025-01-04',
					type: 'locked',
					totalCount: 4,
					unlockedCount: 1,
					photos: [
						{
							id: 15,
							image: '/static/images/lvpai/1581754111190_.pic_hd.png',
							status: 'unlocked'
						},
						{
							id: 16,
							image: '/static/images/lvpai/1591754111191_.pic_hd.png',
							status: 'locked'
						},
						{
							id: 17,
							image: '/static/images/lvpai/1601754111192_.pic_hd.png',
							status: 'locked'
						},
						{
							id: 18,
							image: '/static/images/lvpai/1611754111193_.pic_hd.jpg',
							status: 'locked'
						}
					]
				},
				{
					id: 'cyberpunk_girl',
					title: '赛博朋克少女',
					date: '2024-12-30',
					type: 'generating',
					totalCount: 3,
					unlockedCount: 0,
					progress: 80,
					photos: [
						{
							id: 19,
							image: '/static/images/lvpai/1621754111195_.pic_hd.jpg',
							status: 'generating'
						},
						{
							id: 20,
							image: '/static/images/lvpai/1631754111196_.pic_hd.jpg',
							status: 'generating'
						},
						{
							id: 21,
							image: '/static/images/lvpai/1641754111197_.pic_hd.jpg',
							status: 'generating'
						}
					]
				}
			],
			// AI合照数据
			groupAlbums: [
				{
					id: 'chang_an_twins',
					title: '长安双娇',
					date: '2025-01-02',
					type: 'generating',
					totalCount: 4,
					currentCount: 2,
					progress: 50,
					photos: [
						{
							id: 22,
							image: '/static/images/lvpai/1671754111201_.pic_hd.jpg',
							status: 'generating'
						},
						{
							id: 23,
							image: '/static/images/lvpai/1421754111168_.pic_hd.jpg',
							status: 'generating'
						}
					]
				},
				{
					id: 'friendship_forever',
					title: '闺蜜时光',
					date: '2024-12-25',
					type: 'unlocked',
					totalCount: 3,
					currentCount: 3,
					progress: 100,
					photos: [
						{
							id: 24,
							image: '/static/images/lvpai/1431754111170_.pic_hd.jpg',
							status: 'unlocked'
						},
						{
							id: 25,
							image: '/static/images/lvpai/1521754111180_.pic_hd.jpg',
							status: 'unlocked'
						},
						{
							id: 26,
							image: '/static/images/lvpai/1541754111183_.pic_hd.jpg',
							status: 'unlocked'
						}
					]
				},
				{
					id: 'family_portrait',
					title: '全家福',
					date: '2024-12-20',
					type: 'locked',
					totalCount: 5,
					currentCount: 1,
					progress: 20,
					photos: [
						{
							id: 27,
							image: '/static/images/lvpai/1581754111190_.pic_hd.png',
							status: 'locked'
						}
					]
				}
			]
		}
	},
	
	computed: {
		// 获取当前标签的相册数据
		currentAlbums() {
			switch(this.activeTab) {
				case 'ai_photo':
					return this.aiPhotoAlbums;
				case 'travel':
					return this.travelAlbums;
				case 'ai_erciyuan':
					return this.animeAlbums;
				case 'ai_group':
					return this.groupAlbums;
				default:
					return [];
			}
		},
		
		// 获取所有照片
		allPhotos() {
			return this.currentAlbums.reduce((photos, album) => {
				return photos.concat(album.photos);
			}, []);
		},
		
		// 根据筛选条件过滤相册
		filteredAlbums() {
			if (this.activeFilter === 'all') {
				return this.currentAlbums;
			}
			
			return this.currentAlbums.filter(album => {
				switch(this.activeFilter) {
					case 'unlocked':
						return album.type === 'unlocked' || album.unlockedCount > 0;
					case 'locked':
						return album.type === 'locked';
					case 'generating':
						return album.type === 'generating';
					default:
						return true;
				}
			});
		},
		
		totalPhotos() {
			return this.allPhotos.length;
		},
		
		unlockedPhotos() {
			return this.allPhotos.filter(photo => photo.status === 'unlocked').length;
		},
		
		generatingPhotos() {
			return this.allPhotos.filter(photo => photo.status === 'generating').length;
		},
		
		// 更新筛选器的计数
		updatedFilters() {
			const totalCount = this.currentAlbums.length;
			const unlockedCount = this.currentAlbums.filter(album => 
				album.type === 'unlocked' || album.unlockedCount > 0
			).length;
			const lockedCount = this.currentAlbums.filter(album => 
				album.type === 'locked'
			).length;
			const generatingCount = this.currentAlbums.filter(album => 
				album.type === 'generating'
			).length;
			
			return this.filters.map(filter => ({
				...filter,
				count: filter.key === 'all' ? totalCount :
					   filter.key === 'unlocked' ? unlockedCount :
					   filter.key === 'locked' ? lockedCount :
					   filter.key === 'generating' ? generatingCount : 0
			}));
		}
	},
	onLoad() {
		// 页面加载时的初始化
		console.log('我的相册页面加载');
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		switchTab(tabKey) {
			this.activeTab = tabKey;
			this.activeFilter = 'all'; // 切换标签时重置筛选条件
			console.log('切换标签:', tabKey);
		},
		
		switchFilter(filterKey) {
			this.activeFilter = filterKey;
			console.log('切换筛选:', filterKey);
		},
		
		showSortOptions() {
			uni.showActionSheet({
				itemList: ['按时间排序', '按状态排序', '按类型排序'],
				success: (res) => {
					console.log('选择排序:', res.tapIndex);
				}
			});
		},
		
		viewAlbum(albumType) {
			console.log('查看相册:', albumType);
			uni.showToast({
				title: '查看相册详情',
				icon: 'none'
			});
		},
		
		viewPhoto(photo) {
			console.log('查看照片:', photo);
			if (photo.status === 'locked') {
				// 跳转到解锁照片页面
				uni.navigateTo({
					url: `/pages/ai_unlock_photo/index?photoId=${photo.id}&unlocked=false`
				});
			} else if (photo.status === 'generating') {
				uni.showToast({
					title: '照片生成中，请稍后',
					icon: 'none'
				});
			} else {
				uni.previewImage({
					urls: [photo.image],
					current: photo.image
				});
			}
		},
		
		loadMore() {
			if (this.isLoading || !this.hasMoreData) return;
			
			this.isLoading = true;
			console.log('加载更多照片');
			
			// 模拟加载延迟
			setTimeout(() => {
				this.isLoading = false;
				// 这里可以添加更多照片数据
				// this.hasMoreData = false; // 如果没有更多数据
			}, 1500);
		},
		
		contactService() {
			// 跳转到AI聊天界面
			uni.navigateTo({
				url: '/pages/chat/doubao_chat'
			});
		},
		
		// 新增方法
		showSearchDialog() {
			uni.showModal({
				title: '搜索照片',
				content: '请输入关键词搜索',
				editable: true,
				placeholderText: '输入相册名称或日期',
				success: (res) => {
					if (res.confirm && res.content) {
						console.log('搜索关键词:', res.content);
						this.searchPhotos(res.content);
					}
				}
			});
		},
		
		showMoreOptions() {
			uni.showActionSheet({
				itemList: ['批量管理', '导出照片', '设置', '帮助'],
				success: (res) => {
					const actions = ['batchManage', 'exportPhotos', 'settings', 'help'];
					console.log('选择操作:', actions[res.tapIndex]);
				}
			});
		},
		
		closeFreeTip() {
			this.showFreeTip = false;
		},
		
		searchPhotos(keyword) {
			console.log('搜索照片:', keyword);
			uni.showToast({
				title: '搜索功能开发中',
				icon: 'none'
			});
		},
		
		addMorePhotos(albumType) {
			console.log('添加更多照片到相册:', albumType);
			uni.navigateTo({
				url: `/pages/aiphoto/person_photo/index?albumType=${albumType}`
			});
		},
		
		inviteFriends() {
			console.log('邀请好友参与合照');
			uni.showModal({
				title: '邀请好友',
				content: '邀请好友一起参与合照制作，完成后大家都能获得精美合照！',
				confirmText: '立即邀请',
				success: (res) => {
					if (res.confirm) {
						// 这里可以调用分享功能
						uni.share({
							provider: 'weixin',
							scene: 'WXSceneSession',
							type: 0,
							href: 'https://example.com/invite',
							title: '一起来制作AI合照吧！',
							summary: '邀请你参与长安双娇主题合照制作',
							imageUrl: '/static/images/lvpai/1591754111191_.pic_hd.png'
						});
					}
				}
			});
		},
		
		goToCreate() {
			uni.navigateTo({
				url: '/pages/aiphoto/person_photo/index'
			});
		}
	}
}
</script>

<style scoped>
.my-photo-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f8f9fa;
}

/* 自定义导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	padding-top: var(--status-bar-height, 44rpx);
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	backdrop-filter: blur(10rpx);
}

.navbar-content {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(84, 112, 255, 0.1);
	transition: all 0.3s ease;
}

.back-btn:active {
	background: rgba(84, 112, 255, 0.2);
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: #5470ff;
	font-weight: 300;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #333;
	letter-spacing: 1rpx;
}

.navbar-actions {
	display: flex;
	gap: 12rpx;
}

.action-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.action-btn:active {
	background: rgba(0, 0, 0, 0.1);
	transform: scale(0.95);
}

.action-icon {
	font-size: 32rpx;
	color: #666;
}

/* 顶部标签栏 */
.top-tabs {
	margin-top: calc(88rpx + var(--status-bar-height, 44rpx));
	background: white;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.tabs-scroll {
	width: 100%;
}

.tabs-wrapper {
	display: flex;
	padding: 0 30rpx;
	white-space: nowrap;
}

.tab-item {
	position: relative;
	padding: 30rpx 20rpx;
	margin-right: 40rpx;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.tab-item:active {
	transform: translateY(2rpx);
}

.tab-text {
	font-size: 32rpx;
	color: #666;
	font-weight: 500;
	transition: all 0.3s ease;
}

.tab-item.active .tab-text {
	color: #5470ff;
	font-weight: 700;
}

.tab-indicator {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 6rpx;
	background: linear-gradient(90deg, #5470ff, #7c3aed);
	border-radius: 3rpx;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		width: 0;
		opacity: 0;
	}
	to {
		width: 60rpx;
		opacity: 1;
	}
}

/* 筛选区域 */
.filter-section {
	background: white;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #f0f0f0;
}

.filter-left {
	display: flex;
	gap: 16rpx;
	flex: 1;
	overflow-x: auto;
}

.filter-btn {
	position: relative;
	background: #f8f9fa;
	border-radius: 50rpx;
	padding: 16rpx 24rpx;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8rpx;
	flex-shrink: 0;
	border: 2rpx solid transparent;
}

.filter-btn.active {
	background: linear-gradient(135deg, #5470ff, #7c3aed);
	border-color: #5470ff;
	box-shadow: 0 4rpx 12rpx rgba(84, 112, 255, 0.3);
}

.filter-text {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
	transition: all 0.3s ease;
}

.filter-btn.active .filter-text {
	color: white;
	font-weight: 600;
}

.filter-badge {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 20rpx;
	padding: 4rpx 12rpx;
	font-size: 20rpx;
	color: white;
	font-weight: 600;
	min-width: 32rpx;
	text-align: center;
}

.filter-right {
	margin-left: 20rpx;
}

.sort-btn {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 16rpx 20rpx;
	background: #f8f9fa;
	border-radius: 50rpx;
	transition: all 0.3s ease;
}

.sort-btn:active {
	background: #e9ecef;
	transform: scale(0.98);
}

.sort-text {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

.sort-icon {
	font-size: 24rpx;
	color: #5470ff;
}

/* 统计信息 */
.stats-section {
	background: white;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-bottom: 20rpx;
}

.stats-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.stats-number {
	font-size: 48rpx;
	font-weight: 700;
	color: #5470ff;
	line-height: 1;
}

.stats-label {
	font-size: 24rpx;
	color: #999;
	font-weight: 500;
}

.stats-divider {
	width: 2rpx;
	height: 60rpx;
	background: #f0f0f0;
}

/* 免费提示 */
.free-tip {
	background: linear-gradient(135deg, #ff6b6b, #ff8e53);
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 24rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
	position: relative;
	overflow: hidden;
}

.free-tip::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
	0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
	50% { transform: translateX(0) translateY(0) rotate(45deg); }
}

.tip-content {
	display: flex;
	align-items: center;
	gap: 16rpx;
	flex: 1;
}

.tip-icon {
	font-size: 32rpx;
	animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-8rpx); }
	60% { transform: translateY(-4rpx); }
}

.tip-text-section {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.tip-title {
	font-size: 28rpx;
	color: white;
	font-weight: 700;
}

.tip-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.tip-close {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.tip-close:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.9);
}

.close-icon {
	font-size: 32rpx;
	color: white;
	font-weight: 300;
}

/* 相册内容 */
.album-content {
	flex: 1;
	padding: 0;
}

.loading-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	gap: 20rpx;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid #f0f0f0;
	border-top: 4rpx solid #5470ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 28rpx;
	color: #999;
}

.albums-list {
	padding: 20rpx 30rpx;
}

.album-card {
	background: white;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	border: 1rpx solid #f0f0f0;
	transition: all 0.3s ease;
}

.album-card:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.album-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 30rpx;
}

.album-info {
	flex: 1;
}

.album-title-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 12rpx;
}

.album-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #333;
	line-height: 1.2;
}

.album-tag {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.album-tag.locked {
	background: linear-gradient(135deg, #ffa726, #ff7043);
	color: white;
}

.album-tag.unlocked {
	background: linear-gradient(135deg, #66bb6a, #4caf50);
	color: white;
}

.album-tag.generating {
	background: linear-gradient(135deg, #42a5f5, #26c6da);
	color: white;
}

.generating-dot {
	width: 12rpx;
	height: 12rpx;
	background: white;
	border-radius: 50%;
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(0.8); }
}

.tag-text {
	font-weight: 600;
}

.album-meta {
	display: flex;
	align-items: center;
	gap: 16rpx;
	flex-wrap: wrap;
}

.album-date {
	font-size: 24rpx;
	color: #999;
}

.album-count {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

.unlock-count {
	font-size: 24rpx;
	color: #ff7043;
	font-weight: 500;
}

.progress-text {
	font-size: 24rpx;
	color: #42a5f5;
	font-weight: 500;
}

.view-all-btn, .progress-btn {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 20rpx;
	background: #f8f9fa;
	border-radius: 50rpx;
	transition: all 0.3s ease;
}

.view-all-btn:active, .progress-btn:active {
	background: #e9ecef;
	transform: scale(0.98);
}

.view-all-text {
	font-size: 26rpx;
	color: #666;
	font-weight: 500;
}

.arrow-icon {
	font-size: 24rpx;
	color: #999;
}

/* 照片网格 */
.photo-grid {
	display: flex;
	gap: 16rpx;
	overflow-x: auto;
	padding-bottom: 10rpx;
}

.photo-item {
	position: relative;
	width: 200rpx;
	height: 260rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.photo-item:active {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
}

.photo-locked {
	border: 3rpx solid #ffa726;
}

.photo-generating {
	border: 3rpx solid #42a5f5;
}

.photo-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s ease;
}

.blur-effect {
	filter: blur(4rpx);
}

.photo-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
}

.lock-icon {
	font-size: 48rpx;
	animation: shake 2s ease-in-out infinite;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4rpx); }
	75% { transform: translateX(4rpx); }
}

.generating-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 3rpx solid rgba(255, 255, 255, 0.3);
	border-top: 3rpx solid white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.overlay-text {
	font-size: 24rpx;
	color: white;
	font-weight: 600;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.photo-index {
	position: absolute;
	top: 12rpx;
	right: 12rpx;
	width: 32rpx;
	height: 32rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: white;
	font-weight: 600;
}

.add-more-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 200rpx;
	height: 260rpx;
	border: 3rpx dashed #ddd;
	border-radius: 20rpx;
	background: #fafafa;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.add-more-btn:active {
	border-color: #5470ff;
	background: #f0f4ff;
	transform: scale(0.98);
}

.add-icon {
	font-size: 48rpx;
	color: #ddd;
	margin-bottom: 8rpx;
}

.add-text {
	font-size: 24rpx;
	color: #999;
	font-weight: 500;
}

.placeholder-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200rpx;
	height: 260rpx;
	border: 3rpx dashed #e0e0e0;
	border-radius: 20rpx;
	background: #f9f9f9;
	flex-shrink: 0;
}

.placeholder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.placeholder-icon {
	font-size: 40rpx;
	opacity: 0.5;
}

.placeholder-text {
	font-size: 22rpx;
	color: #bbb;
	font-weight: 500;
}

/* 进度条 */
.progress-section {
	margin-top: 30rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.progress-bar {
	width: 100%;
	height: 8rpx;
	background: #f0f0f0;
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #42a5f5, #26c6da);
	border-radius: 4rpx;
	transition: width 0.3s ease;
}

.progress-label {
	font-size: 24rpx;
	color: #666;
	text-align: center;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 60rpx;
	text-align: center;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
	opacity: 0.6;
}

.empty-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 16rpx;
}

.empty-desc {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
	line-height: 1.5;
}

.empty-btn {
	background: linear-gradient(135deg, #5470ff, #7c3aed);
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	box-shadow: 0 8rpx 20rpx rgba(84, 112, 255, 0.3);
	transition: all 0.3s ease;
}

.empty-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 12rpx rgba(84, 112, 255, 0.4);
}

.btn-text {
	font-size: 28rpx;
	color: white;
	font-weight: 600;
}

/* 加载更多提示 */
.load-more-tip {
	text-align: center;
	padding: 40rpx 0;
}

.load-more-text {
	font-size: 26rpx;
	color: #999;
}

.bottom-spacing {
	height: 120rpx;
}

/* 客服咨询 */
.customer-service {
	position: fixed;
	right: 30rpx;
	bottom: 120rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	z-index: 100;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8rpx); }
}

.service-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
	border: 4rpx solid #5470ff;
	box-shadow: 0 8rpx 20rpx rgba(84, 112, 255, 0.3);
	transition: all 0.3s ease;
	position: relative;
}

.service-avatar::before {
	content: '';
	position: absolute;
	top: -4rpx;
	right: -4rpx;
	width: 24rpx;
	height: 24rpx;
	background: #00c851;
	border-radius: 50%;
	border: 3rpx solid white;
	animation: pulse 2s ease-in-out infinite;
}

.service-avatar:active {
	transform: scale(0.95);
	box-shadow: 0 4rpx 12rpx rgba(84, 112, 255, 0.4);
}

.avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-btn {
	background: linear-gradient(135deg, #5470ff, #7c3aed);
	border-radius: 40rpx;
	padding: 16rpx 28rpx;
	box-shadow: 0 6rpx 16rpx rgba(84, 112, 255, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.service-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s;
}

.service-btn:active::before {
	left: 100%;
}

.service-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 3rpx 10rpx rgba(84, 112, 255, 0.4);
}

.service-text {
	font-size: 26rpx;
	color: white;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.photo-item, .add-more-btn, .placeholder-item {
		width: 180rpx;
		height: 240rpx;
	}
	
	.album-title {
		font-size: 32rpx;
	}
	
	.customer-service {
		right: 20rpx;
		bottom: 100rpx;
	}
	
	.service-avatar {
		width: 100rpx;
		height: 100rpx;
	}
	
	.stats-section {
		padding: 20rpx;
	}
	
	.stats-number {
		font-size: 40rpx;
	}
	
	.album-card {
		padding: 24rpx;
	}
	
	.photo-grid {
		gap: 12rpx;
	}
}

@media (max-width: 600rpx) {
	.navbar-title {
		font-size: 32rpx;
	}
	
	.tab-text {
		font-size: 28rpx;
	}
	
	.filter-text {
		font-size: 24rpx;
	}
	
	.album-title {
		font-size: 28rpx;
	}
}

/* 安全区域适配 */
@supports (bottom: env(safe-area-inset-bottom)) {
	.customer-service {
		bottom: calc(120rpx + env(safe-area-inset-bottom));
	}
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
	.my-photo-container {
		background-color: #1a1a1a;
	}
	
	.custom-navbar, .top-tabs, .filter-section, .stats-section, .album-card {
		background: #2d2d2d;
		border-color: #404040;
	}
	
	.navbar-title, .album-title, .stats-number {
		color: #ffffff;
	}
	
	.tab-text, .filter-text, .album-count {
		color: #cccccc;
	}
	
	.album-date, .stats-label {
		color: #999999;
	}
}

/* 滚动条样式 */
::-webkit-scrollbar {
	display: none;
}

/* 触摸反馈优化 */
.photo-item, .filter-btn, .tab-item, .action-btn, .back-btn {
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
</style>
